<#include "/common/content_layout.html"/>
<@layout>
<style type="text/css">
 #table tr{
 	vertical-align:top;
 }
 #table td{
 	padding:8px;
 }
 #id{
 	width:50px;
 }
</style>
<script type="text/javascript">
$.totalTime = 0;
$(function(){
	$("#navtab").ligerTab({
		onAfterSelectTabItem: function (tabid){
	        switch(tabid){
	        	case 'tabitem1':
	        		//response_maingrid_parse();
	            break;
	        	
	        }
	    }
	});
	
	// 所有用例
	/*
	var CustomersData = {Rows:[
                               {"case_id":"reqseq1","case_name":"新闻","case_state":"字符串","case_type":"2014","case_process":"100%", "case_time":"1"},
                               {"case_id":"reqseq1","case_name":"新闻","case_state":"字符串","case_type":"2014","case_process":"100%", "case_time":"1"},
                               {"case_id":"reqseq1","case_name":"新闻","case_state":"字符串","case_type":"2014","case_process":"100%", "case_time":"1"},
                               
                               ]};
	*/  
	var CustomersData = {Rows:${caseList}};
    $.case_maingrid = $("#case_maingrid").ligerGrid({
    	checkbox: true,
    	columns: [
                  { display: 'ID', name: 'case_id', width: '10%',  frozen:true},
                  { display: '用例名', name: 'case_name',width: '20%'},
                  { display: '状态', name: 'case_state',width: '20%',
                	  render: function (row)
                      {
                		  var html = "";
                		  if(row.case_state == "失败"){
                			  html = '<span style="color:red;font-weight:700;">' + row.case_state + '</span>';
                		  }
                		  else if(row.case_state == "成功"){
                			  html = '<span style="color:green;font-weight:700;">' + row.case_state + '</span>';
                		  }
                		  else{
                			  html = '<span>' + row.case_state + '</span>';
                		  }
                          return html;
                      }},
                  { display: '请求类型', name: 'case_type',width: '20%'},
                  { display: '进度', name: 'case_process',width: '10%'},
                  { display: '执行次数', name: 'case_time',width: '20%'},
                  ],
        width: 600, 
        height: 300,
        data: CustomersData,
        rownumbers: true,
        enabledEdit: true,
        usePager:false,
        isScroll:true,
        /*isChecked:function(){ return true;},*/
       // tree: { columnName: 'en_name' }
        toolbar: { items: [
                           { text: '执行', click: runClick, icon: 'ok'}
                           //{ line: true },
                           //{ text: '导出用例', click: exportCase, icon: 'logout'},
                           //{ text: '导入用例', click: importCase, icon: 'add'}
                          // { line: true }
                           
                    ]
                  }
    }
    );
	
	
});
function runClick(){
	 $.totalTime = 0;
	 $("#passCase").text(0);
     $("#passCount").text(0);
     $("#failCount").text(0);
     $("#time").text(0);
     $('#stateResult').css('background-color', '#d4d4d4');
	var rows = $.case_maingrid.getSelectedRows();
	// console.log("=======", rows);
	if(rows.length > 0){
		run(rows, 0);
	}
	else{
		$.ligerDialog.warn('请先选择需要执行的用例')
	}
}
function run(data, i){
	if(i < data.length){
		var r = data[i];
		$.ajax({   
		    url:'/api/executeById',     
		    type:'post',     
		    data:{"id":r.case_id},
		    cache: false,
		    async : true,     
		    dataType: "json",
		    error:function (XMLHttpRequest, textStatus, errorThrown) {
		        
		    },
		    success:function(data){
		    	if(data.state == "success"){
		    		var selected = $.case_maingrid.getRow(r.__id);
		            if (!selected) { 
		            	alert('请选择任务'); return; 
		            }
		            $.case_maingrid.updateRow(selected,{
		            	case_state: '成功',
		            	case_process:'100%',
		            	case_time:data.case_time
		            });
		            
		            
		            $("#passCase").text(i + 1);
		            $("#passCount").text(parseInt($("#passCount").text()) + data.passCount);
		            $("#failCount").text(parseInt($("#failCount").text()) + data.failCount);
		            $.totalTime = $.totalTime + parseInt(data.time);
		            
		            $("#time").text(calTime($.totalTime));
		            
		    	}
		    	else{
		    		
		    	}
		    },
		    complete:function (XMLHttpRequest, textStatus) {
		    	run(data, i + 1);
		    	var failCount = parseInt($("#failCount").text());
		    	if(failCount > 0){
		    		$('#stateResult').css('background-color', 'red');
		    	}
		    	else{
		    		$('#stateResult').css('background-color', 'green');
		    	}
		    }
		});  
	}
}
function exportCase(){
	
}
</script>
<table id="table" cellpadding="20px">
<tr>
	<td>
		<div id="stateResult" style="width:500px;padding: 8px; margin-top: 1em; background-color: #d4d4d4; color: white;">
			<strong id="passCase">0</strong>/<strong>${caseSize}</strong> 用例完成：<strong id="passCount">0</strong> 通过，<strong id="failCount">0</strong> 失败。<!-- ，<strong id="exceCount">0</strong> 异常 -->
			耗时：<strong id="time">0ms</strong>
		</div>
	</td>
</tr>
<tr>
	<td>
		ID:<input id="id"  type="text" value="${project.id}"/> &nbsp;&nbsp;&nbsp;&nbsp;
		项目名称:<input type="text" value="${project.name}" />
	</td>
</tr>
<tr>
	<td>
		
	</td>
</tr>
</table>
<div id="navtab"  style="width:600px;height: 40%;overflow:hidden; border:1px solid #A3C0E8;margin-top:6px; ">
			<!-- ==========所有用例start=========== -->
			<div tabid="home" title="所有用例" style="height:30%;" lselected="true"  >
				<div id="case_maingrid"></div>
			</div>
			<!-- ==========所有用例end=========== -->
			<!-- 
			<div  title="请求报文解析"  >
				<input type="button" value="保存" id="request_http_btn2" class="l-button" >
		        <div id="request_maingrid"></div>
			</div>
			 -->
		</div>
</@layout>